<script setup>

</script>

<template>
  <div class="flex justify-center items-center h-full pt-20">
    <div class="w-4/6">
      <div class="flex flex-col text-center space-y-6">
        <h2 class="text-4xl font-bold">Our core values</h2>
        <p class="text-gray-700/70 pb-10">Our mission is to set the highest standards for construction sphere.</p>
      </div>
      <div class="flex justify-between">
        <div class="flex pe-px bg-gradient-to-b from-transparent via-gray-300 to-transparent">
          <div class="flex flex-col text-center items-center space-y-3 pe-14 bg-white">
            <img src="/src/assets/ic-like.svg" width="48" height="48" alt="">
            <h3 class="text-base font-bold">Quality</h3>
            <p class="text-gray-700/70 text-xs leading-relaxed">
              Culpa nostrud commodo ea consequat aliquip reprehenderit. Veniam velit nostrud aliquip sunt.
            </p>
          </div>
        </div>
        <div class="flex flex-col text-center items-center space-y-3 px-14">
          <img src="/src/assets/ic-hand.svg" width="48" height="48" alt="">
          <h3 class="text-base font-bold">Safety</h3>
          <p class="text-gray-700/70 text-xs leading-relaxed">
            Anim reprehenderit sint voluptate exercitation adipisicing laborum adipisicing. Minim empor est ea.
          </p>
        </div>
        <div class="flex ps-px bg-gradient-to-b from-transparent via-gray-300 to-transparent">
          <div class="flex flex-col text-center items-center space-y-3 ps-14 bg-white">
            <img src="/src/assets/ic-slippers.svg" width="48" height="48" alt="">
            <h3 class="text-base font-bold">Comfort</h3>
            <p class="text-gray-700/70 text-xs leading-relaxed">
              Sit veniam aute dolore adipisicing nulla sit culpa. Minim mollit voluptate ullamco proident ea ad.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>